<!--
 * @Author: windys
 * @Description: 积分商城
 * @Date: 2022-03-22 09:51:09
-->
<template>
  <div class="page">
    <div class="jifen_info">
      <div class="left">
        <span>我的积分：</span>
        <span class="total">30</span>
      </div>
      <div class="right">
        <span @click="handleOpen(1)">兑换记录></span>
        <span @click="handleOpen(2)">积分明细></span>
      </div>
      <span class="btn" @click="handleAddr">地址管理</span>
    </div>

    <div class="goods">
      <div class="title">
        积分超值购
        <span @click="handleJumpMALL">查看全部</span>
      </div>
      <van-grid :column-num="2" :gutter="0" :border="false">
        <van-grid-item v-for="value in list" :key="value.goodsId">
          <div class="item">
            <div class="cover">
              <van-image
                :src="value.coverUrl"
                width="100%"
                height="100%"
                fit="contain"
              />
            </div>
            <div class="name">{{ value.name }}</div>
            <div class="footer">
              <span class="jifen">{{ value.score }}积分</span>
              <span class="price">+{{ value.sellPrice }}元</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>

    <div class="goods">
      <div class="title">福利券码</div>
      <van-grid :column-num="2" :gutter="0" :border="false">
        <van-grid-item v-for="value in list2" :key="value.goodsId">
          <div class="item">
            <div class="cover">
              <van-image
                :src="value.coverUrl"
                width="100%"
                height="100%"
                fit="contain"
              />
            </div>
            <div class="name">{{ value.name }}</div>
            <div class="footer">
              <span class="jifen">{{ value.score }}积分</span>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </div>
  </div>
  <JifenDetail ref="JifenDetail"></JifenDetail>
  <MallHIstory ref="MallHIstory"></MallHIstory>
</template>

<script>
import { defineComponent, onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { ApiMallHomeData } from "../../api/mall";
import JifenDetail from "./page/jifenDetail.vue";
import MallHIstory from "./page/mallHIstory.vue";
export default defineComponent({
  components: {
    JifenDetail,
    MallHIstory,
  },
  setup() {
    onMounted(() => {
      init();
    });

    const list = ref([]);
    const list2 = ref([]);
    const init = async () => {
      const res = await ApiMallHomeData({ pageIndex: 1, pageSize: 4, type: 1 });
      const res2 = await ApiMallHomeData({
        pageIndex: 1,
        pageSize: 4,
        type: 0,
      });
      if (res && res.length) {
        list.value = res;
      }
      if (res2 && res2.length) {
        list2.value = res2;
      }
    };

    const router = useRouter();
    const handleAddr = () => {
      router.push("/addrList");
    };
    const handleJumpMALL = () => {
      router.push("/mallList");
    };

    const JifenDetail = ref();
    const MallHIstory = ref();
    const handleOpen = (v) => {
      if (v == 1) {
        MallHIstory.value.show = true;
      } else {
        JifenDetail.value.show = true;
      }
    };
    return {
      list,
      list2,
      JifenDetail,
      MallHIstory,
      handleAddr,
      handleJumpMALL,
      handleOpen,
    };
  },
});
</script>




<style scoped lang='scss'>
.page {
  padding: 10px;
  overflow-x: hidden;
  .jifen_info {
    width: 100%;
    height: 110px;
    border-radius: 5px;
    background-image: url("../../assets/img/bg_integral_mall.png");
    background-size: cover;
    box-shadow: 0 5px 5px rgba(56, 55, 55, 0.466);
    font-size: 12px;
    color: #fff;
    position: relative;
    .btn {
      position: absolute;
      font-size: 14px;
      bottom: 10px;
      right: 10px;
      border-bottom: 1px solid #fff;
    }
    .left {
      width: 100%;
      font-size: 16px;
      padding: 10px;
      .total {
        font-size: 28px;
        color: #ddb888;
      }
    }
    .right {
      width: 100%;
      text-align: left;
      font-size: 12px;
      margin-top: 28px;
      span {
        margin: 0 5px;
        border-radius: 20px;
        padding: 5px 10px;
        background: rgba(0, 0, 0, 0.493);
      }
    }
  }

  .goods {
    margin-top: 20px;
    .title {
      position: relative;
      padding: 0 5px;
      font-size: 16px;
      color: #272e3e;
      font-weight: bold;
      span {
        position: absolute;
        right: 5px;
        font-size: 14px;
        color: #999;
        bottom: 0;
      }
    }
    .item {
      border: 1px solid #faf5f5;
      width: 100%;
      height: 190px;
      display: flex;
      font-size: 12px;
      flex-direction: column;
      overflow: hidden;
      border-radius: 5px;
      box-shadow: 0 5px 5px rgba(243, 240, 240, 0.466);

      .cover {
        width: 100%;
        height: 100px;
        overflow: hidden;
        padding: 5px 0;
      }
      .name {
        padding: 2px 5px;
        font-size: 14px;
        color: #272e3e;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        height: 52px;
        overflow: hidden;
      }
      .footer {
        padding: 2px 5px;
        .jifen {
          font-size: 16px;
          color: #ddb888;
        }
        .price {
          font-size: 14px;
          color: #999;
        }
      }
    }
  }
}
</style>